<template>
	<view>
		<uni-popup ref="popup" type="bottom" :safe-area="false">
			<view class="pl_popup">
				<view class="pl_top">
					<view class="title">评论</view>
					<uni-icons @click="close" class="icon" type="closeempty" size="24" color="#AEAEAE"></uni-icons>
				</view>
				<view class="pl_content">
					<scroll-view @scrolltolower="scrolltolower" :style="{ height: `calc(100vh - ${top}px)` }" scroll-y="true" class="scroll-view">
						<view class="pl_pinglun">
							<view class="p_items">
								<view class="user" v-if="itemData.user">
									<view class="u_name flex">
										<image v-if="itemData.user.img" :src="itemData.user.img" mode="aspectFill"></image>
										<image v-else src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png" mode="aspectFill"></image>
										<view class="">{{ itemData.user.name }}</view>
									</view>
									<view class="text">{{ itemData.content }}</view>
									<view class="comment" v-if="itemData.images">
										<view class="c_imglist">
											<view class="img_item" v-for="(img, ind) in itemData.images.split(',')" :key="ind" @click="$previewImage(item.images.split(','), ind)">
												<image :src="img" mode="aspectFill"></image>
											</view>
										</view>
									</view>
									<view class="times flex_jc_sb">
										<view class="time">{{ itemData.createTime }}</view>
										<view class="btn" @click="itemopen(itemData)">回复</view>
									</view>
								</view>
								<loadstatusVue :status="data.loadStatus">
									<view class="pp_text">
										<view class="comment" v-for="(item, index) in data.list" :key="index">
											<view class="ts" v-if="item.receiveUser">
												<text>
													{{ item.user.name }}
													<text class="tshf">回复</text>
													{{ item.receiveUser.name }}：
												</text>
												{{ item.content }}
											</view>
											<view class="ts" v-else>
												<text>{{ item.user.name }}：</text>
												{{ item.content }}
											</view>
											<view class="c_imglist" v-if="item.images">
												<view class="img_item" v-for="(img, ind) in item.images.split(',')" :key="ind" @click="$previewImage(item.images.split(','), ind)">
													<image :src="img" mode="aspectFill"></image>
												</view>
											</view>
											<view class="pp_time flex">
												{{ item.createTime }}
												<view class="" style="margin-left: 20rpx" @click="itemopen(item)">回复</view>
											</view>
										</view>
									</view>
								</loadstatusVue>
							</view>
						</view>
						<view class="btn_zw"></view>
						<view class="bottom_btn">
							<view class="handle_l flex_jc_sb">
								<image src="/static/cc3.png" mode=""></image>
								<view class="input" @click="itemopen(itemData)">与人善言，暖于布帛</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<bottom_input ref="bottomInputRef" @resetList="resetList"></bottom_input>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive, nextTick } from 'vue';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
import { articleReplyList } from '@/api/community.js';
import { toast, showConfirm } from '@/utils/common.js';
const data = reactive({
	list: [],
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	queryParams: {
		id: undefined,
		pageNum: 1,
		pageSize: 10
	}
});
const top = uni.getStorageSync('statusBarHeight') + 99;
const bottomInputRef = ref(null);
const popup = ref(null);

// 延迟函数
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
// 设置加载状态的方法
const setLoadStatus = (status, options = {}) => {
	data.loadStatus = status;
};
// 处理响应数据的通用方法
const handleResponseData = async (res, isLoadMore = false) => {
	// 如果是加载更多，确保loading状态至少显示500ms，避免闪烁
	if (isLoadMore) {
		await delay(500);
	}
	if (res.code == 200) {
		// 处理数据
		if (isLoadMore) {
			data.list.push(...res.rows);
		} else {
			data.list = res.rows || [];
		}
		// 判断是否有更多数据
		data.hasMore = res.rows && res.rows.length >= data.queryParams.pageSize;
		// 设置状态
		if (data.list.length === 0) {
			setLoadStatus('empty');
		} else if (!data.hasMore) {
			setLoadStatus('noMore');
		} else {
			setLoadStatus('success');
		}
		return true;
	}
	return false;
};
// 获取列表数据
const getList = async (isLoadMore = false) => {
	// 防止重复请求
	if (data.isLoading) return;
	try {
		data.isLoading = true;
		if (isLoadMore) {
			if (!data.hasMore) return;
			setLoadStatus('loading');
		} else {
			setLoadStatus('before');
			// 初始加载时显示loading至少1秒，避免闪烁
			await delay(500);
		}
		const res = await articleReplyList(data.queryParams);
		const success = await handleResponseData(res, isLoadMore);
		if (!success) {
			// 请求失败的处理
			setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
		}
	} catch (err) {
		await delay(500);
		setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
	} finally {
		data.isLoading = false;
	}
};
const resetList = (item) => {
	if(item){
		data.list.push(item)
	}
};
const itemData = reactive({});
const dataInfo= reactive({})
const open = (dataInfos,item) => {
	Object.assign(dataInfo,dataInfos)
	if (item) {
		data.queryParams.id = item.id;
		Object.assign(itemData, item);
		popup.value.open();
		getList();
	}
};
const close = () => {
	popup.value.close();
};
// 回复某个人
const itemopen = (item) => {
	if (dataInfo.reply != 1) {
		toast('作者未开启评论');
		return;
	}
	if (dataInfo.self == 1) {
		toast('帖子已下架');
		return;
	}
	bottomInputRef.value.open(item, 2);
};
const scrolltolower = () => {
	if (data.hasMore && (data.loadStatus === 'success' || data.loadStatus === 'noMore') && !data.isLoading) {
		data.queryParams.pageNum++;
		getList(true);
	}
};
defineExpose({
	open,
	close
});
</script>

<style lang="scss">
.pl_popup {
	width: 100%;
	background: #ffffff;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	position: relative;
	box-sizing: border-box;
	.pl_top {
		border-bottom: 1px solid #d1d1d6;
		height: 100rpx;
		line-height: 100rpx;
		.icon {
			top: 0rpx;
			right: 30rpx;
			position: absolute;
		}
		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #1b1b1b;
			text-align: center;
		}
	}
	.scroll-view {
	}
	.pl_content {
		.pl_pinglun {
			.p_items {
				padding: 20rpx;
				box-sizing: border-box;
				.user {
					.u_name {
						image {
							width: 40rpx;
							height: 40rpx;
							border-radius: 20rpx;
							margin-right: 20rpx;
						}
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #979797;
					}
					.text {
						margin-top: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #1b1b1b;
					}
					.comment {
						.c_imglist {
							margin-top: 20rpx;
							display: flex;
							flex-wrap: wrap;
							.img_item {
								width: 148rpx;
								height: 148rpx;
								margin-right: 15rpx;
								margin-bottom: 15rpx;
								position: relative;
								image {
									width: 148rpx;
									height: 148rpx;
									border-radius: 12rpx;
								}
							}
						}
					}
					.comment:last-child {
						margin: 0rpx;
					}
					.times {
						margin-top: 20rpx;
						.time {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #979797;
						}
						.btn {
							width: 60rpx;
							height: 32rpx;
							background: #f7f7f7;
							border-radius: 16rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #979797;
							text-align: center;
							line-height: 32rpx;
						}
					}
				}
				// 评论的回复
				.pp_text {
					width: 710rpx;
					margin-top: 20rpx;
					background: #f7f7f7;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					padding: 18rpx 20rpx 1rpx 20rpx;
					box-sizing: border-box;
					.ts {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #1b1b1b;
						text {
							color: #979797;
						}
						.tshf {
							color: #75613e;
							margin: 0rpx 15rpx;
						}
					}
					.comment {
						margin-bottom: 20rpx;
						.pp_time {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #979797;
							margin: 15rpx auto;
						}
						.c_imglist {
							margin-top: 20rpx;
							display: flex;
							flex-wrap: wrap;
							.img_item {
								width: 148rpx;
								height: 148rpx;
								margin-right: 15rpx;
								margin-bottom: 15rpx;
								position: relative;
								image {
									width: 148rpx;
									height: 148rpx;
									border-radius: 12rpx;
								}
							}
							.item_ads {
								width: 148rpx;
								height: 148rpx;
								position: absolute;
								top: 0%;
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 28rpx;
								color: #ffffff;
								background: rgba(0, 0, 0, 0.5);
								border-radius: 12rpx;
							}
						}
					}
					.comment:last-child {
						margin: 0rpx;
					}
					.b_text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #75613e;
						text-align: right;
					}
				}
			}
		}
	}
}
</style>
